<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui"
    />
    <meta name="format-detection" content="telephone=no" />
    <title>回放</title>
    <link rel="stylesheet" type="text/css" href="css/main_mobile.css" />
    <style>
      #playbackPlayer {
        height: 100%;
      }

      video::-webkit-media-controls-fullscreen-button {
        display: none;
      }

      .imgbox-scroll {
        overflow-y: scroll;
      }

      #full-screen{
        width:80px;
        height: 30px;
        border-right: 1px solid #ccc;
        margin-right: 4px;
      }
      .full-screen {
        width: 50px;
        height: 30px;
        border-right: 1px solid #ccc;
        margin-right: 2px;
      }
    </style>
  </head>
  <body>
    <div id="webPlayer" class="web">
      <div id="topHalf" class="section-top">
        <div id="dispArea" class="disp-area">
          <div id="video-box" class="video-container upper">
            <div class="video-box">
              <!-- 回放视频模块 -->
              <div id="playbackPlayer"></div>
            </div>
          </div>
        </div>
        <div style="display:none;" class="waiting-layer">
          <div>直播未开始</div>
        </div>
      </div>
      <div style="width:100%;height:30px;">
        <button id="full-screen">全屏</button>
        <button class="full-screen" onclick="playbackRateFoo(1)">X1</button>
        <button class="full-screen" onclick="playbackRateFoo(2.5)">X2.5</button>
        <button class="full-screen" onclick="playbackRateFoo(3)">X3</button>
        <button class="full-screen" onclick="playbackRateFoo(4)">X4</button>
      </div>
      <div id="bottomHalf" class="section-bottom">
        <div class="tabs">
          <ul>
            <li><a href="javascript:void(0);">文档</a></li>
            <li><a href="javascript:void(0);">聊天</a></li>
            <li><a href="javascript:void(0);">问答</a></li>
          </ul>
        </div>
        <div class="slider-container">
          <div class="container imgbox imgbox-scroll" id="imgbox">
            <div class="slider-bd allow-roll" id="ppts">
              <!-- 回放文档模块 -->
              <div id="playbackPanel"></div>
            </div>
          </div>
          <div class="container chatBox">
            <div class="slider-bd allow-roll">
              <ul id="chat_container" class="msg-list"></ul>
            </div>
          </div>
          <div class="container chatBox" id="qst1">
            <div class="slider-bd allow-roll" id="qst2">
              <ul class="qalist" id="questionInfo"></ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <input type="hidden" value="2" id="documentDisplayMode" />
    <script src="js/jquery-1.9.0.min.js"></script>
    <script src="js/touchSlide.js"></script>
    <script src="js/main.js"></script>
    <script src="js/jquery.panzoom.min.js"></script>
    <!-- <script
      src="js/playbackSDK.js?v=202011051425"
      type="text/javascript"
    ></script> -->
    <script
      src="//view.csslcloud.net/js/sdk/3.7.4/playbackSDK.js?v=202108031200"
      type="text/javascript"
    ></script>
    <script type="text/javascript">
      var width = $("#qst1").width();
	  console.log(window)

      window.on_cc_player_ready = function () {
        console.log('播放器已准备就绪')
      }

      window.playbackRateFoo = function (val) {
        $.DW.playbackRate(val)
      }
	  
	  var userId = getQuery('userId');
	  var roomId = getQuery('roomId');
	  var viewername = getQuery('viewername');
	  var recordId = getQuery('recordId');
	  var viewertoken = getQuery('viewertoken');
	  
      $("#qst2").css({ width: width });
      $.DW.config({
        userId: userId,
        roomId: roomId,
        recordId: recordId,
        groupId: "",
        viewername: viewername,
        viewertoken: viewertoken,
        fastMode: true,
        forceNew: localStorage.forceNew === "true" ? true : false
      });
      document.addEventListener(
        "WeixinJSBridgeReady",
        function() {
          setTimeout(function() {
            document.getElementsByTagName("video")[0].play();
          }, 1000);
        },
        false
      );
      
      $('#full-screen').click(function(e){
        $.DW.switchFullScreen(e)
      })
	  
	  function getQuery(name) {
	  	// 正则：[找寻'&' + 'url参数名字' = '值' + '&']（'&'可以不存在）
	  	let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
	  	let r = window.location.search.substr(1).match(reg);
	  	if(r != null) {
	  		// 对参数值进行解码
	  		return decodeURIComponent(r[2]);
	  	}
	  	return null;
	  }

      // 同步接收聊天信息
      function on_cc_live_chat_msg_sync(datas) {
        console.log("on_cc_live_chat_msg_sync", datas);

        var mh = "";

        for (var idx = 0; idx < datas.length; idx++) {
          var msg = datas[idx];
          if (msg.groupId === $.DW.groupId || !$.DW.groupId || !msg.groupId) {
            var name = msg["username"],
              msgStr = showEm(msg["msg"] || "");
            var chatId = msg["chatId"],
              status = msg["status"] || "0";

            var liEl =
              '<li chatId="' +
              chatId +
              '" status="' +
              status +
              '"><p>' +
              name +
              '：<span class="tmsg">' +
              msgStr +
              " </span></p></li>";

            mh += liEl;
          }
        }

        var messageCount = $("#chat_container").children().length;
        var overCount = messageCount - 1000 + datas.length;
        if (overCount > 0) {
          $("#chat_container > div:lt(" + overCount + ")").remove();
        }

        $("#chat_container").append(mh);

        $("#chat_container")
          .parent()
          .scrollTop($("#chat_container").height());
      }

      function showEm(str) {
        if (!$.trim(str)) {
          return "";
        }
        var str = $.trim(str);
        str = str.replace(/\</g, "&lt;");
        str = str.replace(/\>/g, "&gt;");
        str = str.replace(/\n/g, "<br/>");
        str = str.replace(
          /\[em_([0-9]*)\]/g,
          '<img src="img/em/$1.gif" border="0" />'
        );
        str = str.replace(
          /\[em2_([0-9]*)\]/g,
          '<img src="img/em2/$1.png" border="0" />'
        );

        var nmsg = "";
        var reg = new RegExp(/\[img_http(s)?:\/\/(.*?)\]/g);
        var isImage = reg.test(str);
        if (isImage) {
          var sIndex = str.indexOf("_") + 1;
          nmsg = str.slice(sIndex, str.length - 1);
          var imgTag =
            '<div class="chatImage" style="width: 100%; cursor: pointer;" ><img src="' +
            nmsg +
            '"  style="width: 100%;"/></div>';
          return imgTag;
        }

        $.each(str.split(" "), function(i, n) {
          n = $.trim(n);
          if (
            n.indexOf("[uri_") == 0 &&
            n.indexOf("]") == n.length - 1 &&
            n.length > 6
          ) {
            var u = n.substring(5, n.length - 1) + " ";
            nmsg +=
              '<a target="_blank" style="color: #2f53ff" href="' +
              u +
              '">' +
              u +
              "</a>" +
              " ";
          } else {
            nmsg += n + " ";
          }
        });
        return nmsg;
      }

      function removeEm(str) {
        return str.replace(/\[em2?_([0-9]*)\]/g, "");
      }

      setTimeout(function() {
        $("#topHalf").height($(window).height() - $("#bottomHalf").height());
      }, 1500);

      // 接收回答
      function on_cc_live_qa_answer(j) {
        if (!j) {
          return;
        }
        if (j.action !== "answer") {
          return;
        }
        var v = j.value;
        if (!v) {
          return;
        }
        ///console.log('接收到回答的groupId' + v.groupId);
        if (v.groupId === $.DW.groupId || !$.DW.groupId || !v.groupId) {
          var qid = v.questionId,
            qc = v.content,
            quid = v.userId,
            quname = v.userName,
            isPrivate = v.isPrivate;
          if (isPrivate) {
            return;
          }
          if (!$("#questionInfo").length) {
            return;
          }

          var q = $("#questionInfo #" + qid);

          if (q) {
            q.append(
              '<p class="qaanswer"><span class="answername">' +
                $.escapeHTML(quname) +
                ' 答：</span><span class="answermsg">' +
                $.escapeHTML(qc) +
                "</span></p>"
            );
          }
        }
        $("#questionInfo").scrollTop($("#questionInfo").height());
      }

      // 接收提问
      function on_cc_live_qa_question(j) {
        if (!j) {
          return;
        }
        if (j.action !== "question") {
          return;
        }
        var v = j.value;
        // console.log('接收到提问的groupId' + v.groupId);
        if (v.groupId === $.DW.groupId || !$.DW.groupId || !v.groupId) {
          if (!v || v.isPublish != 1) {
            return;
          }
          var qid = v.id,
            qc = v.content,
            quid = v.userId,
            quname = v.userName;
          if (!$("#questionInfo").length) {
            return;
          }

          var q = $("#questionInfo #" + qid);
          if (!q.length) {
            $("#questionInfo").append('<li id="' + qid + '"></li>');
            q = $("#questionInfo #" + qid);
          }
          q.append(
            '<p class="qaask"><span class="askname">' +
              $.escapeHTML(quname) +
              ' 问：</span><span class="askmsg">' +
              $.escapeHTML(qc) +
              "</span></p>"
          );
        }
        $("#questionInfo").scrollTop($("#questionInfo").height());
      }
    </script>
  </body>
</html>
